import { debounce } from 'lodash'
let isListeners = false
export default {
  data () {
    return {
      dataInfo: {
        blockName: null
      }
    }
  },
  created () {
    // this.addListener()
  },
  mounted () {
    this.addListener()
    this.autoMaticTrigger()
  },
  beforeDestroy () {
    this.removeListener()
  },
  methods: {
    addListener () {
      if (!isListeners) {
        isListeners = true
        document.querySelector('#canvas').addEventListener('click', this.mouseUp, false)
      }
    },
    removeListener () {
      isListeners = false
      // document.querySelector('#canvas').removeEventListener('click', this.mouseUp, false)
    },
    showSettingModelOnce: debounce(function (blockInfo, e) {
      this.$refs[`setting-model`].open(blockInfo, e)
    }, 100),
    mouseUp (e) {
      this.exclusive()
      if (e.target.parentElement.classList.contains('more_operation')) {
        e.target.parentElement.lastElementChild.style.display = 'block'
        this.editClickbind(e.target.parentElement.lastElementChild.childNodes, e.target.parentElement)
      }

      if (e.target.parentElement.classList.contains('edit_icon_desc')) {
        e.target.parentElement.onclick = function () {
          this.parentElement.firstElementChild.style.display = 'none'
          this.parentElement.lastElementChild.style.display = 'block'
          e.target.parentElement.parentElement.lastElementChild.firstElementChild.focus()
          e.target.parentElement.parentElement.lastElementChild.firstElementChild.value = e.target.parentElement.parentElement.firstElementChild.innerText
        }
        e.target.parentElement.parentElement.lastElementChild.firstElementChild.onblur = function () {
          e.target.parentElement.parentElement.firstElementChild.innerText = this.value
          this.parentElement.style.display = 'none'
          e.target.parentElement.parentElement.firstElementChild.style.display = 'block'
        }
      }
    },
    editClickbind (e, parentElement) {
      let that = this
      e.forEach(element => {
        element.onclick = function () {
          parentElement.lastElementChild.style.display = 'none'
          that.impFlag = true
          const tempInfo = JSON.parse(parentElement.parentElement.closest('.hover-card').getAttribute('blockInfo'))
          if (tempInfo) {
            that.$store.commit('BOTFORMFLAG', false)
            that.showSettingModelOnce(tempInfo, parentElement.parentElement) // Pass Count
          }
        }
      })
    },
    exclusive () {
      document.querySelectorAll('.drop_down_block').forEach(element => {
        element.style.display = 'none'
      })
    },
    autoMaticTrigger () {
      let tempInfo = ''
      let ele = document.querySelector('#canvas').children[0]
      if (ele) tempInfo = JSON.parse(ele.getAttribute('blockInfo'))
      if (tempInfo) {
        if (this.$store.state.bot.isShow) this.showSettingModelOnce(tempInfo, ele)
      }
    }
  }
}
